<template>
  <div>
    <!-- :class="{ hideShow: hideUplodeShow }" -->
    <el-upload
      :disabled="props.disabled"
      ref="upload"
      action="#"
      :http-request="uploadFiles"
      list-type="picture-card"
      accept="image/*"
      :file-list="fileList"
      :limit="5"
      :before-upload="beforeUpload"
      :onChange="onChange"
      multiple
      :class="props.disabled ? 'hideUpload' : ''"
      :on-exceed="onExceed"
    >
      <i slot="default" :class="props.icon ? props.icon : 'el-icon-plus'"></i>
      <div slot="file" slot-scope="{ file }">
        <img
          class="el-upload-list__item-thumbnail"
          v-if="fileList && fileList.length > 0"
          :src="file.url"
          alt="暂无图片"
        />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!props.disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="imgDialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" style="margin-top:20px" />
    </el-dialog>
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
  applyImages: {
      type: Array
    },
    modelId: {
      type: Number,
      default: NaN
    },
    size: {
      type: Number,
      default: 2
    },
    disabled: {
      type: Boolean,
      default: false
    },
    limitImg: {
      type: Boolean, //限制上传图片格式
      default: false
    },
    icon: {
      type: String,
      default: ""
    },
    modelVisable: {
      type: Boolean,
      default: false
    }
})
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
let imgDialogVisible=ref(false)
let dialogImageUrl=ref("")
let fileBaseUrl=ref("")
let fileList=reactive([])
fileBaseUrl.value= localStorage.getItem("fileBaseUrl") || "";
const emits = defineEmits();
    if (props.applyImages) {
      // url:this.fileBaseUrl+
      fileList = props.applyImages.map(item => {
        return {
          url: fileBaseUrl.value + item.url
        };
      });
      console.log(fileList, "fileList=========================");
      emits("callback", fileList);
    } else {
      fileList = [];
    }
  
watch(props.modelVisable, (value) => {
  if (!value) {
    fileList = [];
    resetForm();
  } else {
    fileList = [];
    resetForm();
    if (props.applyImages) {
      fileList = props.applyImages.map(item => {
        return {
          url: fileBaseUrl.value + item.url
        };
      });
      console.log(fileList, "fileList=========================");
      emits("callback", fileList);
    } else {
      fileList = [];
    }
  }
})

function onExceed(file, fileList){
  this.$message.warning('上传图片数量不能超过五张！')
} 
function handlePictureCardPreview(file) {
  dialogImageUrl.value = file.url;
  imgDialogVisible.value = true;
}
function   onChange(file, fileList) {
  proxy.$nextTick(() => {
    // console.log(document.querySelector(".is-ready"), ".is-ready========");
    // 删除超过大小限制的图片DOM
    document.querySelector(".is-ready").remove();
  });
}
async function beforeUpload(file) {
      let fileTypes = ["image/jpeg", "image/jpg", "image/png"];
      if (file.size > props.size * 1024 * 1024) {
        this.$message.error(`上传图片大小限制为${props.size}M以内!`);
        hideUplodeShow.value = false;
        return false;
      } else if (!fileTypes.includes(file.type)) {
        this.$message.error("上传图片只支持jpg/jpeg/png格式!");
        hideUplodeShow.value = false;
        return false;
      }
      let url = await getBase64(file);

      // ]
      fileList.push({ file, url });
      emits("handleRemove", false);
      emits("callback", fileList);
      return true;
    }
    function    handleRemove(file) {
      let fileList1 = reactive(proxy.$refs.upload.uploadFiles)
      let index = fileList1.findIndex(fileItem => {
        return fileItem.uid === file.uid;
      });
      fileList1.splice(index, 1);
      fileList.splice(index, 1);
      emits("handleRemove", true);
    }
    function  resetForm() {
      // this.hideUplodeShow = false
      fileList = [];
      proxy.$refs.upload.uploadFiles = [];
    }

</script>

<style lang="scss" scoped>
:deep(.hideUpload ){
  .el-upload.el-upload--picture-card {
    display: none;
  }
}
.dialogBox {
  .topBox {
  }
}
</style>
